	<template>
	  <div class="common-layout">
	    <el-container>
	      <el-header><el-menu
     class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
    @select="handleSelect" router
  >
  <el-menu-item v-for="(item, index) in userInfo.menus" :key="index" :index="item.path">
	<el-icon>
		<component :is="item.icon"></component>
	</el-icon>
	{{item.title}}
</el-menu-item>
	<div class="flex-grow"/>
	<span class="el-menu-item home-welcome">欢迎{{userInfo.user.username}},
		{{userInfo.user.role }}你好</span>
	<el-menu-item index="5" @click="lgout">logout</el-menu-item>	
  </el-menu>
  </el-header>
  
	      <el-main>
				<RouterView></RouterView>
		  </el-main>
	    </el-container>
	  </div>
	  </template>



<script  setup >

import {ref, reactive, onMounted, onUnmounted} from 'vue';
import {ElMessage,ElMessageBox,ElNotification} from "element-plus";
import  router  from "@/router/index.js";
import  {getStorage,delStorage} from "@/utils/localStorage.js"
import {logout} from "@/api/getData.js"
const activeIndex =  ref("/main");
const activeIndex2 = ref('1')
const userInfo=reactive({
	user:{},
	menus:[]
})
const handleSelect = (key , keyPath) => {
  console.log(key, keyPath);
}
const getUserInfo=()=>{
let userData=JSON.parse(getStorage("userInfo"));
console.log('userData',userData)
console.log('userDataRole',userData.user.role)
userInfo.user=userData.user;
userInfo.menus=userData.menus;
}

const main=()=>{
	router.push({ path: "/home" });
}
const user=()=>{
	router.push({ path: "/user" });
}
const admin=()=>{
	router.push({ path: "/admin" });
}
const lgout = () => {
	router.push({ path: "/main" });
		ElMessageBox.confirm(
				'请问您是否退出登录',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '点错了',
					type: 'warning',
				}
			)
			.then(() => {
				//执行登出
				logout().then(res => {
					if (res != -1) {
						//退出成功
						//1.提示用户
						ElNotification({
							title: '提示',
							message: '退出登录成功',
							type: 'warning',
						})
						//2.清除浏览器保存的用户信息
						delStorage("userInfo");
						delStorage("Token");
						//3.跳转到登录页面
						router.replace("/")
					}
				})
			})

	}
//  程序加载时的钩子函数
// onMounted(() => {
//   updateTime(); // 初始更新时间
//   const intervalId = setInterval(updateTime, 1000); // 每秒更新一次时间
//   onUnmounted(() => clearInterval(intervalId)); // 清除定时器
// });

onMounted(() => {
	 getUserInfo()
});
</script>
<style>
	.el-header{
		   padding: 0px;
		   width: 100%; 
	}
	.el-menu{
		 flex: 1;
		  
		  width: 100%; /* 确保菜单占据整个可用宽度 */
	}
	.flex-grow {
	  flex-grow:1;
	}
	
</style>

